<!--
* @Description: 流程任务退回
* @Author: DHL
* @Date: 2022-12-23 13:52:43
 * @LastEditors: DHL
 * @LastEditTime: 2023-07-13 09:24:02
-->
<template>
  <tw-dialog
    v-model="visible"
    title="退回"
    :loading="loading"
    width="500px"
    height="400px"
    :appendToBody="true"
    :scrollbar="false"
    @close="handleClose"
  >
    <el-table
      ref="backTableRef"
      :data="tableData"
      current-row-key="id"
      highlight-current-row
      stripe
      style="width: 100%"
      height="400"
      @cellClick="handleCellClick"
      @select="handleSelect"
      header-row-class-name="back-node-header"
    >
      <el-table-column type="selection" class-name="back-node-header_selection" width="55" />
      <el-table-column property="name" label="名称" width="150" />
      <el-table-column property="address" label="经办人">
        <template #default="scope">
          {{ getUserName(scope.row.assigneeList) }}
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <el-button @click="handleReset()">取 消</el-button>

      <el-button type="primary" @click="handleSubmit()"> 提 交 </el-button>
    </template>
  </tw-dialog>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import { apiFlowTaskSearchBackList } from '@/api/flow/flowTask'
  import { FlowTaskModel } from '@/api/flow/model/flowTask'
  import { isEmpty } from '@/utils/isUtils'
  import { arraySerializeToStr } from '@/utils/arrayUtils'

  const emit = defineEmits(['submit'])

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////
  const loading = ref(true)
  const backTableRef = ref()
  const tableData = ref([] as Array<FlowTaskModel>)

  /**
   * 显示弹框
   */
  const visible = ref(false)

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  /**
   * 打开弹框
   */
  function handleOpen(params) {
    visible.value = true

    nextTick(() => {
      loading.value = false
      handleSearch(params)
    })
  }

  /**
   * 关闭弹框
   */
  function handleClose() {
    visible.value = false
  }

  /**
   * 查询可以撤回的节点
   */
  function handleSearch(params) {
    loading.value = true

    apiFlowTaskSearchBackList(params)
      .then((result) => {
        if (result?.success) {
          tableData.value = result.data
        } else {
          ElMessage.error(result?.message)
        }
      })
      .finally(() => {
        loading.value = false
      })
  }

  /**
   * 获取经办人
   * @param assigneeList
   */
  function getUserName(assigneeList) {
    if (isEmpty(assigneeList)) {
      return ''
    }
    return arraySerializeToStr(assigneeList, 'name')
  }

  /**
   * 单元格点击事件
   */
  function handleCellClick(row) {
    backTableRef.value.clearSelection()
    backTableRef.value.toggleRowSelection(row, true)
  }

  /**
   * 切换选中
   * @param selection
   * @param row
   */
  function handleSelect(selection, row) {
    if (selection) {
      backTableRef.value.clearSelection()
    }
    backTableRef.value.toggleRowSelection(row, selection)
  }

  /**
   * 提交表单
   */
  function handleSubmit() {
    const selectRows = backTableRef.value.getSelectionRows()

    if (selectRows.length === 0) {
      ElMessage.warning('请选择需要退回的节点')
      return
    }

    if (selectRows.length > 1) {
      ElMessage.warning('只能选择一个节点')
      return
    }

    emit('submit', selectRows[0].id)
  }

  /**
   * 重置表单
   */
  function handleReset() {
    visible.value = false
  }

  defineExpose({ handleOpen, handleReset })
</script>

<style lang="scss">
  .back-node-header {
    .back-node-header_selection {
      .cell {
        display: none !important;
      }
    }
  }
</style>
